<template>
  <Drawer
    placement="right"
    :closable="true"
    v-model="visible"
    width="400"
    scrollable
    @on-close="cancel"
  >
    <template #header>
      <div class="flex flex-col justify-between">
        <div class="flex items-center mb-4 gap-x-2">
          <img
            src="~@/assets/images/icon_Loop.jpg"
            class="w-6 h-6"
            alt="Start icon"
          />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">{{ title }}</p>
          </div>
        </div>
        <div class="text-sm text-gray-500">
          编写代码，处理输入变量来生成返回值
        </div>
      </div>
    </template>
    <CommonCollapse title="循环设置">
      <div>
        循环类型
        <Tooltip transfer theme="light" placement="top" max-width="400" content="用于通过设定循环次数和逻辑，重复执行一系列任务" >
          <Icon type="ios-alert-outline" size="18" />
        </Tooltip>
      </div>
      <Select size="small" v-model="form.aggstrategy">
        <Option
          v-for="item in LOOP_TYPE_OPTIONS"
          :value="item.label"
          :key="item.value"
          >{{ item.label }}</Option
        >
      </Select>
    </CommonCollapse>
    <Divider></Divider>
    <CommonCollapse title="循环数组" tip="仅支持引用数组，循环次数为数组的长度；若无任何引用则默认无限循环，需配合“终止循环”节点完成循环流程。">
      <template #right>
        <Button
          type="primary"
          size="small"
          icon="md-add"
          @click="addInput('inoutlist')"
        ></Button>
      </template>
      <div class="panel-table">
        <div class="panel-table-header">
          <div class="name" style="width: 110px">变量名</div>
          <div class="name">变量值</div>
        </div>
        <div class="panel-table-list">
          <Form ref="formEl" :model="form" label-position="top">
            <div
              class="flex items-center mb-4"
              v-for="(item, index) in form.inoutlist"
            >
              <div class="panel-table-item" style="width: 160px">
                <FormItem
                  :key="index"
                  :prop="'inoutlist.' + index + '.varname'"
                  :rules="{
                    required: true,
                    message: '变量名不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    v-model="item.varname"
                    placeholder="输入变量名"
                    size="small"
                  />
                </FormItem>
              </div>
              <div
                class="panel-table-item"
                style="width: 100px; margin-right: 0"
              >
                <FormItem>
                  <Select size="small" v-model="item.vartype">
                    <Option
                      v-for="item in BE_TYPE_LIST"
                      :value="item.value"
                      :key="item.value"
                      >{{ item.label }}</Option
                    >
                  </Select>
                </FormItem>
              </div>
              <div class="panel-table-item" style="width: 180px">
                <FormItem
                  :prop="'inoutlist.' + index + '.varparam'"
                  :rules="{
                    required: true,
                    message: '变量值不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    size="small"
                    v-model="item.varparam"
                    check-strictly
                    placeholder="输入参数值"
                  >
                  </Input>
                </FormItem>
              </div>
              <div
                class="panel-table-item btn"
                @click="removeInput('inoutlist', index)"
              >
                <Icon type="md-remove" />
              </div>
            </div>
          </Form>
        </div>
      </div>
    </CommonCollapse>
    <Divider></Divider>
    <CommonCollapse title="中间变量" tip="变量可在多次循环中实现共享，可用于在多次循环中传递变量">
      <template #right>
        <Button
          type="primary"
          size="small"
          icon="md-add"
          @click="addInput('intervarlist')"
        ></Button>
      </template>
      <div class="panel-table">
        <div class="panel-table-header">
          <div class="name" style="width: 110px">变量名</div>
          <div class="name">变量值</div>
        </div>
        <div class="panel-table-list">
          <Form ref="formEl" :model="form" label-position="top">
            <div
              class="flex items-center mb-4"
              v-for="(item, index) in form.intervarlist"
            >
              <div class="panel-table-item" style="width: 160px">
                <FormItem
                  :key="index"
                  :prop="'intervarlist.' + index + '.varname'"
                  :rules="{
                    required: true,
                    message: '变量名不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    v-model="item.varname"
                    placeholder="输入变量名"
                    size="small"
                  />
                </FormItem>
              </div>
              <div
                class="panel-table-item"
                style="width: 100px; margin-right: 0"
              >
                <FormItem>
                  <Select size="small" v-model="item.vartype">
                    <Option
                      v-for="item in BE_TYPE_LIST"
                      :value="item.value"
                      :key="item.value"
                      >{{ item.label }}</Option
                    >
                  </Select>
                </FormItem>
              </div>
              <div class="panel-table-item" style="width: 180px">
                <FormItem
                  :prop="'intervarlist.' + index + '.varparam'"
                  :rules="{
                    required: true,
                    message: '变量值不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    size="small"
                    v-model="item.varparam"
                    check-strictly
                    placeholder="输入参数值"
                  >
                  </Input>
                </FormItem>
              </div>
              <div
                class="panel-table-item btn"
                @click="removeInput('intervarlist', index)"
              >
                <Icon type="md-remove" />
              </div>
            </div>
          </Form>
        </div>
      </div>
    </CommonCollapse>
    <Divider></Divider>

    <CommonCollapse title="输出" tip="循环完成后输出的内容，仅支持引用循环体中节点的输出变量">
      <template #right>
        <Button
          type="primary"
          size="small"
          icon="md-add"
          @click="addInput('outputjsonlist')"
        ></Button>
      </template>
      <div class="panel-table">
        <div class="panel-table-header">
          <!-- <div class="name" >变量名</div>
          <div class="name" style="width: 180px">变量值</div>
          <div class="name">变量类型</div> -->
          <div class="name" style="width: 110px">变量名</div>
          <div class="name">变量值</div>
        </div>
        <div class="panel-table-list">
          <Form ref="formEl" :model="form" label-position="top">
            <div
              class="flex items-center mb-4"
              v-for="(item, index) in form.outputjsonlist"
            >
              <div class="panel-table-item" style="width: 160px">
                <FormItem
                  :key="index"
                  :prop="'outputjsonlist.' + index + '.varname'"
                  :rules="{
                    required: true,
                    message: '变量名不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    v-model="item.varname"
                    placeholder="输入变量名"
                    size="small"
                  />
                </FormItem>
              </div>
              <div
                class="panel-table-item"
                style="width: 100px; margin-right: 0"
              >
                <FormItem>
                  <Select size="small" v-model="item.vartype">
                    <Option
                      v-for="item in BE_TYPE_LIST"
                      :value="item.value"
                      :key="item.value"
                      >{{ item.label }}</Option
                    >
                  </Select>
                </FormItem>
              </div>
              <div class="panel-table-item" style="width: 180px">
                <FormItem
                  :prop="'outputjsonlist.' + index + '.varparam'"
                  :rules="{
                    required: true,
                    message: '变量值不可为空',
                    trigger: 'blur',
                  }"
                >
                  <Input
                    size="small"
                    v-model="item.varparam"
                    check-strictly
                    placeholder="输入参数值"
                  >
                  </Input>
                </FormItem>
              </div>
              <div
                class="panel-table-item btn"
                @click="removeInput('outputjsonlist', index)"
              >
                <Icon type="md-remove" />
              </div>
            </div>
          </Form>
        </div>
      </div>
    </CommonCollapse>
  </Drawer>
</template>
<script setup>
import { ref } from 'vue';
import CommonCollapse from '@/components/CommonCollapse/index.vue';

import { BE_TYPE_LIST } from '../../lib/constant';

const LOOP_TYPE_OPTIONS = [
  {
    label: '使用数组循环',
    value: 0
  },
  {
    label: '指定循环次数',
    value: 1
  },{
    label: '无限循环',
    value: 2
  }
]

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: '代码',
  },
});

const emit = defineEmits(['add', 'remove', 'cancel']);

const visible = ref(false);

// 组件的增删
const addInput = (listKey) => {
  emit('add', listKey);
};
const removeInput = (listKey, index) => {
  if(index ==0) return;
  emit('remove', listKey, index);
};
const init = () => {
  visible.value = true;
};
const cancel = () => {
  visible.value = false;
  emit('cancel')
};

defineExpose({
  init,
});
</script>
<style lang="scss">
.panel-table-header {
  align-items: center;
  display: flex;
  gap: 4px;
  padding: 0 4px;

  .name {
    width: 120px;
    margin-right: 6px;
    box-sizing: content-box;
  }
  .center {
    text-align: center;
  }
}

:deep(.ivu-form-item-error-tip){
  font-size: 12px;
}
.panel-table-item {
  height: 30px;
  margin-right: 6px;
  &.center {
    text-align: center;
  }
  &.btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-left: 12px;
    height: 22px;
  }
}
</style>
